<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>防抖节流</title>
</head>
<style>
        .list-item {
                height: 400px;
                margin: 5px;
                list-style: none;
        }

        .list-item-img {

                height: 100%;
        }
</style>

<body>
        <ul id="list">
                <li class="list-item"><img src="" class="list-item-img" lazyload="true"
                                data-original="https://img.36krcdn.com/hsossms/20250313/v2_15ad8ef9eca34830b4a2e081bbc7f57a@000000_oswg172644oswg1536oswg722_img_000?x-oss-process=image/resize,m_mfit,w_960,h_400,limit_0/crop,w_960,h_400,g_center" />
                </li>
                <li class="list-item"><img src="" class="list-item-img" lazyload="true"
                                data-original="https://img.36krcdn.com/hsossms/20250312/v2_aeaa7a1d51e74c3a8f909c96cd73a687@000000_oswg169950oswg1440oswg600_img_jpeg?x-oss-process=image/format,webp" />
                </li>
                <li class="list-item"><img src="" class="list-item-img" lazyload="true"
                                data-original="https://img.36krcdn.com/hsossms/20250312/v2_1c88dc26ff9341cf8738d670896ce3a8@5284654_oswg847922oswg1440oswg600_img_png?x-oss-process=image/resize,m_mfit,w_960,h_400,limit_0/crop,w_960,h_400,g_center/format,webp" />
                </li>
                <li class="list-item"><img src="" class="list-item-img" lazyload="true"
                                data-original="https://img.36krcdn.com/hsossms/20250312/v2_e1d92f43af2c4f47b8852ea8786e606f@6100851_oswg635095oswg1053oswg495_img_png?x-oss-process=image/resize,m_mfit,w_960,h_400,limit_0/crop,w_960,h_400,g_center/format,webp" />
                </li>
                <li class="list-item"><img src="" class="list-item-img" lazyload="true"
                                data-original="https://img.36krcdn.com/hsossms/20250307/v2_9295b22d4a1b4b55ac4c3379b2da80cc@6100851_oswg781048oswg1053oswg495_img_png?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center/format,webp" />
                </li>
                <li class="list-item"><img src="" class="list-item-img" lazyload="true"
                                data-original="https://img.36krcdn.com/hsossms/20250313/v2_0f70e0a75a8d4736a050e846cd6ab3e5@1743780481_oswg183216oswg1080oswg629_img_000?x-oss-process=image/format,jpg/interlace,1" />
                </li>
        </ul>
<script>
        //减少onSroll的次数
        /*   var a=1;
                window.onscroll = function () {
                        a++
                        console.log(a);
                } */
                function addObserver() {
    // 获取所有具有 data-original 属性和 lazyload 类的 img 元素，这些图片将被监听是否进入视口（懒加载目标）
    const eles = document.querySelectorAll('img[data-original][lazyload]');
    
    // 打印获取到的 NodeList 类数组对象（包含所有待懒加载的 img 元素）
    console.log(eles);

    // 可选：遍历打印每个元素（当前被注释掉）
    /*   eles.forEach(ele => {
            console.log(ele)
    }) */

    // 方案1：将类数组转化为数组并遍历打印每个元素（当前被注释掉）
    /*  [...eles].map(ele =>{
            console.log(ele,'???')
        }) */

    // 方案2：使用 Array.from 将类数组转化为数组并遍历打印每个元素（当前被注释掉）
    /*  Array.from(eles).map(ele =>{
            console.log(ele,'!!!')
        }) */

    // 方案3：使用 call 绑定 this 并调用 map 遍历类数组并打印每个元素（当前被注释掉）
    /*  Array.prototype.map.call(eles,ele=>{
            console.log(ele,'。。。')
    }) */

    // 创建一个 IntersectionObserver 实例，用于监听目标元素是否进入视口
    const observer = new IntersectionObserver(function(changes){
        // 打印观察到的变化列表（IntersectionObserverEntry 对象数组）
        console.log(changes);
        
        // 遍历每一个变化项
        changes.forEach(function(element){
            // 打印每个变化项及其 target（即被观察的 DOM 元素）
            console.log(element, element.target);

            // 如果元素在视口内可见（交集比例大于0且小于等于1）
            if (element.intersectionRatio > 0 && element.intersectionRatio <= 1) {
                // 将图片的 src 设置为 data-original 的值（开始加载真实图片）
                element.target.src = element.target.dataset.original;
            }
        })
    })

    // 遍历所有要监听的 img 元素
    eles.forEach((item) => {
        // 调用 observe 方法，让 observer 开始监听 item（img 元素）
        // item 是被观察的目标元素
        // 这里应用的是设计模式中的观察者模式
        observer.observe(item);
    })
}

// 调用 addObserver 函数启动懒加载监听机制
addObserver()
</script>
</body>

</html>